<template>
    <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/overview' }">
            <h3>首页</h3>
        </el-breadcrumb-item>

        <el-breadcrumb-item>
            <h3>API接口测试</h3>
        </el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="cardstyle">


        <el-row :gutter="2">

            <el-col :span="20" :offset="2">
                <el-button @click="add">Add Item新增项目</el-button>
                <div style="vertical-align: middle;">
                    <p> 项目名称 </p>
                </div>

            </el-col>
        </el-row>

        <el-divider />

        <el-row :gutter="2">

            <el-col :span="20" :offset="2">

                <p v-for="item in count" :key="item" class="scrollbar-demo-item">
                    <!-- {{ item }} -->
                    <el-checkbox v-model="checked1" label="Option 1" size="large" />
                </p>

            </el-col>

            <el-row>
                <el-button @click="addtestcase" >新增用例</el-button>
            </el-row>

        </el-row>


    </el-card>
</template>

<script setup>

// import Map from '../../Home/map.vue'

import { ref, reactive } from 'vue'
import { ArrowRight } from '@element-plus/icons-vue'     //图标


//    const obj = reactive({id: "统计管理 "})
const count = ref(0)
const checked1 = ref(false)

// 新增项目
function add() {
    count.value++
}

const options = [
    {
        value: 'GET',
        label: "GET"
    },
    {
        value: 'POST',
        label: "POST"
    },
    {
        value: 'PUT',
        label: "PUT"
    }
]
const apiform = reactive({
    name: '',
    passwd: '',
    region: ''
    // interfacename: "",
    // url: "",
    // params: "",
    // header: "",

})
//    const formRef = ref(null);     // 创建dom 引用

//    提交请求  // 接口自动化测试
function onSubmit() {

    api_test().then(res => {
        let { action, code, task_id } = res.data;
        console.log("action:", action);
        console.log("code:", code);
        console.log("task_id:", task_id);
        //获取到结果后,添加到表格
        // onAddItem(action, code, task_id)
    })

}



function Cancel() {
    alert("Cancel")
}


function submitUpload() {
    alert("提交测试数据")
}


</script>


<style lang="less" scoped>
.cardstyle {
    height: 100%;
}


.scrollbar-demo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    margin: 10px;
    text-align: center;
    border-radius: 4px;
    background: var(--el-color-primary-light-9);
    color: var(--el-color-primary);
}
</style>